<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<SCRIPT type="text/javascript" src="../js/jquery.min.js"></script>
<SCRIPT type="text/javascript" src="../js/jquery.form.js"></script>
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen"
	href="../js/ui/redmond/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="../js/jqGrid/ui.jqgrid.css" />
<script src="../js/ui/redmond/jquery-ui-1.8.11.custom.min.js"
	type="text/javascript"></script>
<script src="../js/jqGrid/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="../js/jqGrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(function(){
		//定义主表
       $("#gridTable").jqGrid({
       		url:"${pageContext.request.contextPath }/resource/resource-search.action",
               datatype: "json",
               height: 250,
               width: 940,
               colNames:['节点编号','父节点','资源名称','显示序号','类型','URL'],
               prmNames : {  
                   page:"currentPage",    // 表示请求页码的参数名称  
                   rows:"pageSize",    // 表示请求行数的参数名称  
                   sort: "sortField", // 表示用于排序的列名的参数名称  
                   order: "order", // 表示采用的排序方式的参数名称  
                   search:"_search", // 表示是否是搜索请求的参数名称  
                   nd:"nd", // 表示已经发送请求的次数的参数名称  
                   id:"id", // 表示当在编辑数据模块中发送数据时，使用的id的名称  
                   oper:"oper",    // operation参数名称（我暂时还没用到）  
                   editoper:"edit", // 当在edit模式中提交数据时，操作的名称  
                   addoper:"add", // 当在add模式中提交数据时，操作的名称  
                   deloper:"del", // 当在delete模式中提交数据时，操作的名称  
                   subgridid:"id", // 当点击以载入数据到子表时，传递的数据名称  
                   npage: null,   
                   totalrows:"totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal  
               },
               colModel:[
                       {name:'id',index:'id', width:50, formatter: 'integer', sorttype:'int'},
                       {name:'parentId',index:'parentId', width:50, sorttype:'int'},
                       {name:'name',index:'name', width:100, sorttype:'string'},
                       {name:'displayOrder',index:'displayOrder', width:50, hidden: true, sorttype:'int'},
                       {name:'type',index:'type', width:50, sorttype:'int'},                
                       {name:'url',index:'url', width:400, sorttype:'string'}
               ],
               sortname: 'id',
               sortorder: 'asc',
               viewrecords: true,	//定义是否在Pager Bar中显示记录数信息
               emptyrecords:'无符合条件的数据',
               collapsed: true,
               jsonReader: {
	             	repeatitems: false,	//存放数据的数据结构为数组时为false
	             	root: "page.items", //存放数据的数组
	             	records: "page.items.length",	//本页记录数
	             	page: "page.currentPage", //当前页
	             	total: "page.totalPage" //总页数
               },
               rowNum:10,
               rownumbers:true,
               toolbar:[true, 'top'],
               rowList:[10,20,30],
               pager:"#gridPager",
               altRows: false,	//奇偶行风格是否不同
               multiselect: true,	//是否支持多选
               caption: "资源列表"
       });
       //定义导航
	   $("#gridTable").jqGrid('navGrid','#gridPager', {}).navButtonAdd('#gridPager', { 
           caption: "Columns",
           onClickButton: function() {
        	   $("#gridTable").jqGrid('columnChooser');
           }
       });
       //启用多条件组合查询
	   //$("#gridTable").searchGrid( {multipleSearch:true} );
       
});
	        
$(document).ready(function() { 
    $('#resourceForm').ajaxForm({ 
        beforeSubmit: function() {
        		return true;
        	},
        dataType:  'json', 
        success:   function(data) {
        	jQuery("#gridTable").jqGrid('clearGridData');
        	for(var i=0;i<=data.page.items.length;i++) {
        		jQuery("#gridTable").jqGrid('addRowData',i+1,data.page.items[i]);
        	}
        }
    }); 
});

$(function() {
	$( "#startTime, #endTime" ).datepicker({dateFormat:'yy-mm-dd', maxDate: '+0', minDate: '-7'});
});
</SCRIPT>
<body>
<form id="resourceForm" name="consignForm"
	action="${pageContext.request.contextPath }/resource/resource-search.action" method="post">
<table>
	<tr>
		<td><s:text name="resource.name"/></td>
		<td><s:textfield name="resource.name" value="" size="12" /></td>
		<td><s:text name="resource.type"/></td>
		<td>
			<s:select name="resource.type" emptyOption="true" list="@tk.mystudio.web.util.KeyValueUtil@getList('tk.mystudio.permission.constant.ResourceType')"
			 listKey="value" listValue="getText(key)"></s:select>
		</td>
		<td>从</td>
		<td><s:textfield name="startTime" value="2011-04-12" size="10" />
		</td>
		<td>到</td>
		<td><s:textfield name="endTime" value="2011-04-13" size="10" /></td>
		<td><s:submit name="search" value="查询"></s:submit></td>
	</tr>
</table>
</form>
 <table id="gridTable"></table>
 <div id="gridPager"></div>
</body>
</html>